<template>
  <div
    style="
      height: 100vh;
      width: 100vw;
      background-color: azure;
      margin: 0;
      padding-top: .1rem;
    "
  >
    <div class="queren">
      <h4 style="font-size: 0.4rem">确认预约信息</h4>
      <div style="width: 100%; float: left">
        <p class="left">就诊城市</p>
        <p class="right">{{ yssj.doctorcity }}</p>
      </div>
      <div style="width: 100%; float: left">
        <p class="left">出诊医生</p>
        <p class="right">{{ yssj.doctorname }}</p>
      </div>
      <div style="width: 100%; float: left">
        <p class="left">就诊科室</p>
        <p class="right">{{ yssj.doctoradministre }}</p>
      </div>
      <div style="width: 100%; float: left">
        <p class="left">就诊日期</p>
        <p class="right">2024-11-25</p>
      </div>
    </div>
    <div class="tianjia">
      <h4 style="font-size: 0.4rem">添加联系人</h4>
      <van-form @failed="onFailed">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="value1"
            label="联系人"
            name="pattern"
            placeholder="我们怎么称呼您"
            :rules="[{ pattern, message: '请输入正确内容' }]"
          />
          <!-- 通过 validator 进行函数校验 -->
          <van-field
            v-model="value2"
            label="联系方式"
            name="validator"
            placeholder="请填写联系人手机"
            :rules="[{ validator, message: '请输入正确内容' }]"
          />
          <!-- 通过 validator 返回错误提示 -->
          <van-field
            label="验证码"
          >
            <template #input>
              <input
                type="text"
                v-model="value3"
                style="width: 2.2rem; border: none;margin-left:-.5rem;"
                name="yanzhengma"
                placeholder="填写手机验证码"
                 :rules="[{ yanzhengma, message: '请输入正确内容' }]"
              />
              <van-popup :show="show" :style="{ padding: '.2rem' }">
                您的验证码是：{{code}} 
                <button @click="copyVerificationCode">
                  复制验证码
                </button>
                </van-popup>
              <van-button
                @click="yzm"
                style="width: 1.7rem; padding: 0; height: 0.6rem;"
                plain
                type="success"
              >
                <p>{{ huo }}</p>
              </van-button
              >
            </template>
          </van-field>
        </van-cell-group>

         <van-field
            label="患者疾病症状"
          >
            <template #input>
             <textarea v-model="value4" name="" id="" style="width: 100%;height: 2rem;"></textarea>
            </template>
          </van-field>

        <div>
          <van-button round block type="primary" native-type="submit" @click="qrgh">
            确认挂号
          </van-button>
        </div> 
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import clipboardCopy from 'clipboard-copy';
const show = ref(false);
import { closeToast, showLoadingToast, showToast } from 'vant'
const route = useRoute()
const yssj = route.query
console.log(yssj)
import { showDialog } from 'vant';
showDialog({
  title: '挂号须知',
  message: '先预约挂号，后到院就诊',
}).then(() => {
  // on close
});
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const pattern = /^[\u4e00-\u9fff]{3}$/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = val => /^1[3456789]\d{9}$/.test(val)
const yanzhengma = /^d{n}$/

const onFailed = errorInfo => {
  console.log('failed', errorInfo)
}

const huo = ref<string|number>('获取验证码')

      const code = ref('');
      // 复制验证码功能
const copyVerificationCode = () => {
      if (code.value) {
        clipboardCopy(code.value)
        .then(() => {
            showToast({
              message: '验证码已复制到剪贴板',
              duration: 1000,
            });
          })
        .catch((err) => {
            showToast({
              message: '复制验证码失败',
              duration: 1000,
            })
          });
      }
    };

import { reactive, onMounted, watchEffect } from 'vue'
import moment from 'moment';
const data = reactive({
  totalSeconds: 60,
  seconds: 60,
})
// 获取时分秒
const updateCountdown = () => {
  data.seconds = data.totalSeconds % 60
}
// 倒计时方法
const countdown = () => {
  data.totalSeconds--
  updateCountdown()
}
const yzm = () => {
  console.log('获取验证码')
  // 开启定时器，一秒调用一下倒计时方法
  let timer = setInterval(countdown, 1000)
  // 监听，当总时间为0的时候关闭定时器
  watchEffect(() => {
    huo.value = data.seconds
    if (data.totalSeconds === 0) {
      huo.value = '重新获取'
      data.seconds = 60
      data.totalSeconds = 60
    }
  })
    show.value = true;
    setTimeout(()=>{
      show.value = false
    },2000)
}
// 验证码随机数
 const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
  for (let i = 0; i < 4; i++) {
          //设置随机数范围,这设置为0 ~ 36
          const index = Math.floor(Math.random() * 9);

          //字符串拼接 将每次随机的字符 进行拼接
          code.value += random[index];
      }

const router = useRouter()

const currentTime1 = ref('')
currentTime1.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
 var getTime = new Date().getTime(); //获取到当前时间戳
  var time = new Date(getTime); //创建一个日期对象
  function nowDate(time) {
    var year = time.getFullYear(); // 年
    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
    var date =( time.getDate()+3).toString().padStart(2, '0'); // 日
    return (
      year + "-" + month + "-" + date + " " 
    )
  }

  // 确认挂号
  const qrgh = () => {
    if(code.value == value3.value && value1.value != "" && value2.value != "" &&value4.value != ""){
      router.push({path:"/xiao/qrgh",query:{
        name:yssj.doctorname,
        city:yssj.doctorcity,
        keshi:yssj.doctoradministre,
        doctorstate:yssj.doctorstate,
        doctorimage:yssj.doctorimage,
        value1:value1.value,
        value2:value2.value,
        currentTime1:currentTime1.value,
        data:nowDate(time),
      }})
    }else if(value4.value == ""){
  showToast({
    message: '请填写患者病状',
    duration: 2000
  });
} else if( value1.value == "" && value2.value == ""){
      showToast({
        message: '请填写完整信息'
      });
      return;
    }
  }
</script>

<style lang="scss">
.queren {
  width: 90%;
  height: 5rem;
  background-color: #fff;
  margin-left: 5%;
  h4 {
    margin: 0.2rem;
  }
  .left {
    margin-top: 0.1rem;
    font-size: 0.4rem;
    float: left;
    padding-left: 0.2rem;
  }
  .right {
    margin-top: 0.1rem;
    font-size: 0.4rem;
    float: right;
    margin-right: 0.2rem;
  }
}
.tianjia {
  width: 90%;
  height: 5rem;
  background-color: #fff;
  margin-left: 5%;
  .van-form {
  margin-top: -0.5rem;
    font-size: 0.4rem;
    float: left;
  }
}
</style>
